<template>
  <div class="comment-item py-4" :class="{ 'ml-2': depth > 0 }" :style="`--depth: ${depth}`">
    <div class="flex gap-3">
      <img :src="comment.author.avatar || '/default-avatar.png'" class="w-10 h-10 rounded-full"
        :alt="comment.author.name">
      <div class="flex-1">
        <div class="flex items-center gap-2">
          <span class="font-medium text-gray-900">{{ comment.author.name }}</span>
          <span class="text-xs text-gray-500">{{ formatDate(comment.createdAt) }}</span>
        </div>

        <div v-if="!comment.isEditing" class="mt-1">
          <p class="text-gray-800">{{ comment.content }}</p>
          <div class="flex gap-3 mt-2 text-sm">
            <button class="text-blue-600 hover:text-blue-800" @click="toggleReply">
              回复
            </button>
            <button v-if="depth < maxDepth" class="text-gray-600 hover:text-gray-800" @click="toggleEdit">
              编辑
            </button>
            <button class="text-red-600 hover:text-red-800" @click="emit('delete', comment.id)">
              删除
            </button>
          </div>
        </div>

        <CommentEditor1 v-else :model-value="comment.content" @submit="handleEditSubmit"
          @cancel="comment.isEditing = false" />

        <CommentEditor1 v-if="comment.isReplying" placeholder="写下你的回复..." @submit="handleReplySubmit"
          @cancel="comment.isReplying = false" />
      </div>
    </div>

    <div v-if="comment.replies?.length" class="mt-4 pl-2 border-l-2 border-gray-200">
      <CommentItem1 v-for="reply in comment.replies" :key="reply.id" :comment="reply" :depth="depth + 1"
        :max-depth="maxDepth" @reply="handleChildReply" @delete="emit('delete', $event)" />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Comment } from '~/types/comment'

const props = defineProps({
  comment: {
    type: Object as () => Comment,
    required: true
  },
  depth: {
    type: Number,
    default: 0
  },
  maxDepth: {
    type: Number,
    default: 5
  }
})

const emit = defineEmits(['reply', 'delete'])

const formatDate = (date: string | Date) => {
  return new Date(date).toLocaleString()
}

const toggleReply = () => {
  props.comment.isReplying = !props.comment.isReplying
  if (props.comment.isReplying) {
    props.comment.isEditing = false
  }
}

const toggleEdit = () => {
  props.comment.isEditing = !props.comment.isEditing
  if (props.comment.isEditing) {
    props.comment.isReplying = false
  }
}

const handleEditSubmit = (content: string) => {
  props.comment.content = content
  props.comment.isEditing = false
}

const handleReplySubmit = (content: string) => {
  emit('reply', {
    parentId: props.comment.id,
    content
  })
  props.comment.isReplying = false
}

const handleChildReply = (payload: { parentId: string | number, content: string }) => {
  emit('reply', payload)
}
</script>

<style scoped>
.comment-item {
  position: relative;
}

.comment-item:not(:last-child) {
  border-bottom: 1px solid #eee;
}
</style>